<template>
	<div v-for="value in mycontents">
	<div class="selectInf clearFloat">
    <!--录入文本-->
    <div class="textContaint fl" v-if= 'value.textShow'  v-on:click="getadd">
      <textarea class="textarea" placeholder="请输入任务描述" @focus = "addCart" @blur="turnBack" v-model = 'value.contents.textContent' ></textarea>
	</div>
    <!--录入图片-->
    <div class="imgContaint fl" v-if= 'value.imgShow'>
	  <img id="img-{{ $index }}" v-bind:src="value.imgSrc" v-on:click = 'preImg'/>
	</div>
    <!--录入语音-->
    <div class="soundContaint fl clearFloat" v-if= 'value.soundShow'>
		  <div class="fl soundImg">
			  <img id="sound-{{ $index }}" src="../about/images/start.png" v-on:click="startRecord" v-if= 'value.status==1'/>
				<img id="sound-{{ $index }}" src="../about/images/stop.png" v-on:click="stopRecord" v-if= 'value.status==2'/>
				<img id="sound-{{ $index }}" src="../about/images/sound.png" v-on:click="recordPlay" v-if= 'value.status==3'/>
				<img id="sound-{{ $index }}" src="../about/images/stopPlay.png" v-on:click="recordStop" v-if= 'value.status==4'/>
			</div>
			<div class="fl soundDate">
			  <span>{{value.showtime}}</span>
			</div>
		</div>
    <!--信息右部-->
    <div class="rightInf fr">
				<img src="images/slh1.png" id="bottom-{{ $index }}" v-on:click="showBottom"  v-if='value.showBottom'/>
			<img src="images/slh.png" id="bottom-{{ $index }}" v-on:click="showBottom" v-else/>
    </div>
		</div>
		<!--信息底部-->
    <div class="bottomInf clearFloat" v-if='value.showBottom'>
			<div class="bottomImg fl"><img src="images/delete.png" id="delete-{{ $index }}" v-on:click="delete"/></div>
			<div class="bottomImg fl"><img src="images/up.png" id="up-{{ $index }}" v-on:click="turnUp"/></div>
			<div class="bottomImg fl"><img src="images/down.png" id="down-{{ $index }}" v-on:click="turndown"/></div>
  </div>
</div>
</template>

<script>
import Vue from 'vue'
import Bus from '../about/bus.js';
import VueResource from 'vue-resource'
Vue.use(VueResource);
export default {
  data () {
	  return {
		  mycontents: this.contents,
		}
	},
	methods: {
	  showSelect: function () {
	  this.showAndHidden=false
	},
	  showBottom: function (e) {
			var index=e.target.id.split('-')[1]
			if(this.mycontents[index].showBottom){
			  this.mycontents[index].showBottom = false
			}else{
			  this.mycontents[index].showBottom = true
			}
	  },
		delete: function(e) {
		  var index=e.target.id.split('-')[1]
		  this.mycontents.splice(index,1)
			console.log(this.mycontents)
		},
		turnUp: function(e) {
		  var index=e.target.id.split('-')[1]
     var contains = this.mycontents
    if (index == 0){
      return
    }
    else {
      contains[index-1] = contains.splice(index, 1, contains[index-1])[0]
      this.mycontents=contains
    }
		},
		turndown: function(e) {
		  var index=e.target.id.split('-')[1]
			var contains = this.mycontents
    if (index == contains.length-1){
      return
    }
    else {
		  var tmp=contains.splice(index,2)
			var tmp1=tmp.splice(1,1)
			contains=contains.splice(index,0,tmp1[0],tmp[0])
			//contains[index+1] = contains.splice(index, 1, contains[index+1])[0]
    }
		},
		addCart: function() {
   Bus.$emit('getTarget', false);
   },
	 turnBack: function() {
	Bus.$emit('getTarget', true);
	},
	preImg: function (e) {
	  var that = this
	  var index=e.target.id.split('-')[1]
	  var contains = this.mycontents
	  //预览图片
	  wx.previewImage({
	  current: contains[index].imgSrc, // 当前显示图片的http链接
	  urls: [contains[index].imgSrc] // 需要预览的图片http链接列表
	  });
	  },
		//开始录音
		startRecord: function (e) {
		  var that = this
	    var index=e.target.id.split('-')[1]
	    var contains = this.mycontents
		  wx.startRecord();
			contains[index].status = 2
			that.recordTime(contains,index)
			wx.onVoiceRecordEnd({
             // 录音时间超过一分钟没有停止的时候会执行 complete 回调
             complete: function (res) {
			 contains[index].status = 3
			 contains[index].localId = res.localId
			 wx.uploadVoice({
              localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
              contains[index].contents.media_id = res.serverId; // 返回音频的服务器端ID
              }
            });
           }
          });
		},
		//停止录音
		stopRecord: function (e) {
		  var that = this
		  var index=e.target.id.split('-')[1]
		  var contains = this.mycontents
		  wx.stopRecord({
	        success: function (res) {
			contains[index].status = 3
		    clearInterval(contains[index].SI)
			contains[index].localId = res.localId
			wx.uploadVoice({
              localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
              contains[index].contents.media_id = res.serverId; // 返回音频的服务器端ID
              }
            });
	       }
      });
		},
		//播放语音
		recordPlay: function (e) {
		  var that = this
		  var index=e.target.id.split('-')[1]
		  var contains = this.mycontents
		  contains[index].status = 4
		  that.recordTime(contains,index)
			wx.playVoice({
            localId: contains[index].localId
           });

		   wx.onVoicePlayEnd({
            success: function (res) {
            var localId = res.localId; // 返回音频的本地ID
						contains[index].status = 3
			      clearInterval(contains[index].SI)
           }
          });
		},
		//停止播放语音
		recordStop: function (e) {
		  var that = this
		  var index=e.target.id.split('-')[1]
		  var contains = this.mycontents
		  contains[index].status = 3
		  clearInterval(contains[index].SI)
		  wx.stopVoice({
           localId: contains[index].localId
         });
		},
		//获取录音时间
		recordTime: function (contains,index) {
		   var seconds=1;
			 contains[index].SI=setInterval(function(){
	     var sc;
	     if(seconds<10){
		   sc='0'+seconds
		   //将数据绑定到页面上
			 contains[index].showtime = '00:'+sc
			 contains[index].contents.time = sc
	     }else if(seconds>=10 && seconds<=60){
		   sc=seconds
		   //将数据绑定到页面上
			 contains[index].showtime = '00:'+sc
			 contains[index].contents.time = sc
	     }else{
		   clearInterval(contains[index].SI)
	     }
	    seconds++
    }, 1000);
		},
		},
	props: ['contents'],
	watch: {
  contents(val) {
    this.mycontents = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
  },
  mycontents(val){
    //xxcanghai 小小沧海 博客园
   this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
  }
 },
 ready: function () {
 Vue.use(VueResource);
 var that=this
	this.$http.post('http://xyg.bigdatas.top/get_jssdk_config',{"url":window.location.href},{"emulateJSON":true}).then(function(data){
	wx.config({
				 debug: false,
				 appId: 'wx7491574828fade87',
				 timestamp:data.data.data.timestamp,
				 nonceStr:data.data.data.nonceStr,
				 signature:data.data.data.signature,
				 jsApiList: [
				 'checkJsApi',
				 'onMenuShareTimeline',
				 'hideOptionMenu',
				 'chooseImage',
				 'translateVoice',
				 'uploadImage',
				 'previewImage',
				 'startRecord',
				 'stopRecord',
				 'playVoice',
				 'stopVoice',
				 'onVoiceRecordEnd',
				 'uploadVoice',
				 'onVoicePlayEnd',
				 'getLocation',
				 ]
		 });

	})
 }
}
</script>

<style scoped>
  .selectInf{
  display:flex;
  align-items:center;padding:8px 0;
  margin-top:5px;
  background-color:#fff;
  }
  .fl{float:left;}
  .fr{float:right;}
  .clearFloat:after{
	content:'';
	display:block;
	clear:both;
	hisibility:hidden;
	}
  .textContaint,.soundContaint{
	height:40px;
  width:90%;
	box-sizing: border-box;
  }
	.imgContaint{width:90%;
	box-sizing: border-box;}
	.soundImg,.soundDate{width:80px;margin-left:20px;height:40px;line-height:40px;}
	.soundDate{text-align:center;}
	.soundImg img{width:25px;hiehgt:25px;vertical-align:middle;}
  .imgContaint,.soundContaint{padding-left:8px;}
  .imgContaint{text-align:center;padding-left:15px;padding-top:7px;padding-bottom:7px;}
  .imgContaint img{max-width:100%;border-radius:8px;}
  .textarea{border:0;}
  .rightInf{
   width:8%;
   margin-left: 10px;
  }
  .rightInf img{width:25px;height:25px;vertical-align:middle}
  .textarea{resize:none;width:100%;margin-left:10px;}
	.bottomInf{width:100%;background-color: #fff;padding:0 8px;box-sizing: border-box;}
	.bottomImg{width:33%;text-align: center;border-top: 1px solid #d0d0d0;height:35px;line-height:35px;}
	.bottomImg img{width:15px;height:15px;vertical-align: middle;}
</style>
